<template>
	<view class="box-wp">
		<view v-if="list.length>0">
			<view class="item" v-for="(info,index) in list" :key="index">
				<view class="main">
					<view class="left">
						<u--image :src="info.pic" width="160rpx" height="160rpx" mode="aspectFill"></u--image>
					</view>
					<view class="right">
						<view class="title u-line-1">
							{{info.prodName}}
						</view>
						<view class="cont-price">
							<view class="price">
								<text style="font-size:18rpx ;">￥</text>
								<text style="font-size:34rpx ;"> {{info.price}}</text>
								<text style="font-size:24rpx ;margin-left: 4rpx;"> / {{info.units}}</text>
							</view>
							<view class="count">
								x {{info.num}}
							</view>
						</view>
					</view>
				</view>
				<view class="bottom">
					<view class="sell-box flex_between_center">
						<view class="sell-box-name">
							赠送人
						</view>
						<view class="sell-box-name2">
							{{info.shopUser}}
						</view>
					</view>
					<view class="time-box flex_between_center">
						<view class="time">
							{{info.createTime}}
						</view>
						<view class="detail" @click.stop="goToDetail(info.id)">
							{{`查看详情 >`}}
						</view>
					</view>
				</view>
			</view>
		</view>

		<u-empty marginTop="150" mode="list" textSize="30" iconSize="150" v-else>
		</u-empty>
	</view>
</template>


<script>
	import {
		mapGetters
	} from 'vuex'
	export default {
		data() {
			return {
				list: [],
				pageNo: 1,
				total: 0,
				pageSize: 10
			};
		},
		onShow() {
			this.getList(1)
		},
		onPullDownRefresh() {
			this.getList(1)
		},
		computed: {
			...mapGetters(['userInfo'])
		},
		onReachBottom() {
			if (this.pageNo * this.pageSize > this.total) {
				uni.showToast({
					title: '没有更多数据',
					icon: 'none'
				})
			} else {
				this.pageNo++
				this.getList()
			}

		},
		methods: {
			async getList(arg) {
				uni.showLoading()
				if (arg == 1) {
					this.pageNo = 1
					this.list = []
					this.total = 0
				}
				let {
					openId
				} = this.userInfo
				let res = await this.$api.getOrderList({
					pageNo: this.pageNo,
					pageSize: this.pageSize,
					purchaseOpenId: openId,
					isDel: 0
				})
				if (res.success) {

					console.log(res.result.records);
					this.list = [...this.list, ...res.result.records]
					this.total = res.result.total
				} else {
					this.list = []
					this.total = 0
				}
				uni.hideLoading()
				uni.stopPullDownRefresh()

			},

			goToDetail(id) {
				uni.navigateTo({
					url: `/pagesMall/myReceive/myReceiveDetail?id=${id}`
				})
			}
		}
	}
</script>
<style lang="scss" scoped>
	.box-wp {
		overflow: auto;
		background-color: #f7f8fa;
		min-height: 100vh;
		padding-bottom: 20rpx;

		.item {
			border-radius: 16rpx;
			background-color: #fff;
			margin: 32rpx;
			padding: 20rpx;

			.main {
				display: flex;
				justify-content: space-between;

				.left {
					margin-right: 32rpx;

					image {
						border-radius: 5rpx;
						width: 140rpx;
						height: 140rpx;
					}
				}

				.right {
					flex: 1;

					.title {
						overflow: hidden;
						width: 450rpx;
						height: 40rpx;
						font-size: 28rpx;
						font-weight: 600;
						color: #1D2129;
					}

					.cont-price {
						margin-top: 20rpx;
						height: 50rpx;
						display: flex;
						justify-content: space-between;
						align-items: center;

						.count {
							height: 40rpx;
							font-size: 28rpx;
							font-weight: 400;
							color: #86909C;
							line-height: 39rpx;
						}


						.price {
							color: #FF7D00;
						}
					}





				}
			}

			.bottom {
				.sell-box {
					margin-top: 24rpx;

					.sell-box-name {
						height: 40rpx;
						font-size: 28rpx;
						font-weight: 400;
						color: #4E5969;
						line-height: 39rpx;
					}

					.sell-box-name2 {
						height: 40rpx;
						font-size: 28rpx;
						font-weight: 600;
						color: #1D2129;
						line-height: 39rpx;
					}
				}

				.time-box {
					margin-top: 24rpx;

					.time {
						height: 40rpx;
						font-size: 28rpx;
						font-weight: 400;
						color: #86909C;
						line-height: 39rpx;
					}

					.detail {
						height: 40rpx;
						font-size: 28rpx;
						font-weight: 400;
						color: #276AEE;
						line-height: 39rpx;
					}
				}

			}




		}

	}
</style>